<template>
    <div>
      <div class="item"
      v-for="(item,index) in list"
      :key="index">
        <div class="item-title border-bottom" >
          <span class="iconfont item-title-icon">&#xe744;</span>
          {{item.title}}
        </div>
        <div v-if="item.children">
          <detail-list :list="item.children"
          class="item-children"
          ></detail-list>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default{
    name:'DetailList',
    props:{
      list:Array
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~styles/varibles.styl'
  .item-title-icon
    width :.36rem
    height :.36rem
    border-radius :.4rem
    background :$bgcolor
    padding :.06rem
  .item-title
    line-height :.8rem
    font-size :.32rem
    padding :0 .2rem
  .item-children
    padding :0 .2rem
</style>
